/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2019-07-20 16:42:28
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-18 09:35:47
 */
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { hashHistory } from 'react-router';

@inject('centerStore')
@observer
class LayoutLeftComponent extends Component {
  componentDidMount() {
    const { centerStore } = this.props;
    centerStore.buildCountOfTopicType();
  }

  render() {
    return (
      this.renderCountByTopicType()
    );
  }

  renderCountByTopicType() {
    const { centerStore } = this.props;
    let countOfTopicType = toJS(centerStore.countOfTopicType);

    let rows = [];
    if (countOfTopicType.dataList) {
      countOfTopicType.dataList.sort((a, b) => b.count - a.count);
      countOfTopicType.dataList.map((data, index) => {
        let leftspan_className = '';
        if (index < 3) {
          leftspan_className = 'leftspan_1';
        } else {
          leftspan_className = 'leftspan_2';
        }
        if (index < 15) {
          rows.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6c6s03@${index}`} span="24"><div onClick={() => this.jumpToLibrary(data.topictype)} title={data.showname} className="left_c2"><div className="leftdiv"><span className={leftspan_className}>{index + 1}</span></div><span className="centerspan">{data.showname}</span>  <span className="rightspan">{data.count}</span></div></Col>);
        }
      });
    }

    return (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8wkgit`} className="wea-odoc-center-left-row">
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m0kk0m`}>
          <div className="wea-info-group-new">
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rm8rdu`} className="wea-info-group-new-title">
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qcvph3`}>
                <div className="wea-info-group-new-title-info"> {countOfTopicType.showname}（{countOfTopicType.totalCount}）</div>
              </Col>
            </Row>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@g6og7x`} className="wea-info-group-new-content" >
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@50yd80`}>
                {rows}
              </Col>
            </Row>
          </div>
        </Col>
      </Row>);
  }

  jumpToLibrary(topictype) {
    let params = {
      conditionKeys: 'topictype',
      conditionVals: topictype,
    };
    let path = {
      pathname: '/main/offical/odocLibraryNew',
      query: params,
    };

    hashHistory.push(path);
  }
}
export default LayoutLeftComponent;
